<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<!-- saved from url=(0034)http://harapeco.grrr.jp/ryokocial/ -->
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>リョコーシャル | 新しい旅の伴侶</title>
<link rel="stylesheet" href="/css/mobile.css">
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/ryokocial.js"></script>
</head>
<body>

<div class="page" id="home" style="display: block; ">
	<h1>リョコーシャル</h1>
	<p>旅の足跡を見るうんぬん</p>
	<p><a href="/#upload">写真を追加</a></p>
	
	<section>
	<h2>近くの写真</h2>
	<ul class="photos">
	<c:if test="${empty ids}">
  		画像が見つかりませんでした。
  	</c:if>
	<c:forEach var="id" items="${ids}">
	<li>
		<!--  <img src="http://ryokocial.appspot.com/thumbnail?id= -->
		<!-- <a href="http://localhost:8888/thumbnail?id= -->
		<a href="/thumbnail?id=
			<c:out value="${id}"/>
		">
			<img src="
				/thumbnail?id=
				<c:out value="${id}"/>
				<c:if test="${size == 'small'}">
				&size=small
				</c:if>
			"
			title="/thumbnail?id=<c:out value="${id}"/>"
			alt=""> 
		</a>
		<br/>
	<li>
	</c:forEach>
	<!-- 
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="./ryokocial_files/photo-70x70.jpg"></a></li>
	 -->
	</ul>
	</section>
	
	<footer>
	<p class="copyright">Copyright © チーム☆小悪魔</p>
	</footer>
</div><!-- #home -->

<div class="page" id="upload" style="display: none; ">
	<p><a href="http://harapeco.grrr.jp/ryokocial/#" class="back">戻る</a></p>
	<section>
	<h1>写真を追加</h1>
	<form action="/thumbnail"  method="POST" enctype="multipart/form-data">
    <!-- 
    	TODO リョコーシャル用の属性を加える
     -->
    	画像名<input type="text" name="picname"><br />		<!-- 0 -->
    	ユーザー名<input type="text" name="user"><br />		<!-- 1 -->
    	旅行名<input type="text" name="travel"><br />		<!-- 2 -->
    	公開範囲<select name="permission">					<!-- 3 -->
    		<option value="0" selected>自分</option>
    		<option value="1">友達</option>
    		<option value="2">公開</option>
    	</select><br />
    	コメント<input type="text" name="comment"><br />	<!-- 4 -->
    	タグ<input type="text" name="tags"><br />			<!-- 5 -->
    	緯度<input type="text" name="lat"><br />			<!-- 6 -->
    	経度<input type="text" name="lng"><br />			<!-- 7 -->
      	<input type="file"  name="imgfile" />				<!-- 8 -->
      	<!-- 都道府県を入れれば検索が早くなるかも -->
      	<!-- 			今いる都道府県公開範囲<select name="prefectural"> -->
<!--     		<option value="0" selected>北海道</option> -->
<!--     		<option value="1">青森</option> -->
<!--     		<option value="2">公開</option> -->
<!-- 			</select><br /> -->
      	<input type="submit" value="アップロード"/>
    </form>
	</section>
</div><!-- #upload -->

<div class="page" id="list" style="display: none; ">
	<p><a href="http://harapeco.grrr.jp/ryokocial/#" class="back">戻る</a></p>
	<h1>（ユーザ）/この近くの（タグ）</h1>←分けたほうがいい？
	<ul class="photos">
	<c:if test="${empty ids}">
  		画像が見つかりませんでした。
  	</c:if>
	<c:forEach var="id" items="${ids}">
	<li>
		<!--  <img src="http://ryokocial.appspot.com/thumbnail?id= -->
		<!-- <a href="http://localhost:8888/thumbnail?id= -->
		<a href="/thumbnail?id=
			<c:out value="${id}"/>
		">
			<img src="
				/thumbnail?id=
				<c:out value="${id}"/>
				<c:if test="${size == 'small'}">
				&size=small
				</c:if>
			"
			title="/thumbnail?id=<c:out value="${id}"/>"
			alt=""> 
		</a>
		<br/>
	<li>
	</c:forEach>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	</ul>
</div><!-- #list -->

<div class="page" id="detail" style="display: none; ">
	<div id="detail-main"><div class="wrapper">
	<p><a href="http://harapeco.grrr.jp/ryokocial/#" class="back">戻る</a></p>
	<h1>
		<small class="user"><a href="http://harapeco.grrr.jp/ryokocial/#list">ユーザ</a></small>
		<span class="caption">キャプション</span>
	</h1>
	<ul class="tags">
		<li><a href="http://harapeco.grrr.jp/ryokocial/#tags">タグ</a></li>
		<li><a href="http://harapeco.grrr.jp/ryokocial/#tags">タグ</a></li>
	</ul>
	<div class="current-photo"><a href="http://harapeco.grrr.jp/ryokocial/images/photo-320x480.jpg"><img alt="" src="/ryokocial_files/photo-100x100.jpg"></a></div>
	<ul class="prev-photos">
		<li class="first"><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
		<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	</ul>
	<ul class="next-photos">
		<li class="first"><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
		<li><a href="http://harapeco.grrr.jp/ryokocial/#detail"><img alt="" src="/ryokocial_files/photo-70x70.jpg"></a></li>
	</ul>
	</div></div>
	<div id="map"><img alt="" src="/ryokocial_files/map.png"></div>
</div><!-- #detail -->



<div class="image-box"><img></div></body></html>